<template>
    <div :class="customClass">{{ d.num.toFixed(0) }}</div>
</template>

<script setup>
import { reactive, watch } from 'vue'
import gsap from 'gsap'

// 总数
const d = reactive({
    num: 0
})

// 对外暴露的值
const props = defineProps({
    value: {
        type: Number,
        default: 0
    },
    customClass: {
        type: String,
        default: '' // 默认为空值
    }
})

function animetaToValue() {
    gsap.to(d, {
        duration: 0.5,
        num: props.value
    })
}

animetaToValue()

// 侦听属性, 监听 props.value 的变化，一旦 props.value 发生变化，就调用 animateToValue 函数执行动画
watch(() => props.value, () => animetaToValue())
</script>